<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<head th:replace="_header_include::frag(~{::title},~{},~{})">
    <title>后台管理系统</title>
</head>
<body>
<div v-loading="loading" id="userManage" class="userManage mainPadding" style="display: none;">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>业务设置</el-breadcrumb-item>
        <el-breadcrumb-item>商务布局管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="mainWhiteBg">
        <div class="inforTitle">添加商务布局管理</div>
        <el-row :gutter="20">
            <el-form :model="form" :rules="rules" ref="form" class="mainWhitePadding">
           
             	<el-row>
                    <el-col :span="8">
                        <el-form-item label="商务小组：" :label-width="formLabelWidth1" prop="businessGroupId">
                            <el-select filterable v-model="form.businessGroupId" placeholder="请选择" style="width:100%" @change="setProject">
                                <el-option
                                    v-for="item in swList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="业务线：" :label-width="formLabelWidth" prop="businessLine" v-if="0">
                            <el-input v-model="form.businessLine" placeholder="业务线"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="4">
                        <el-form-item label="签约项目：" :label-width="formLabelWidth1" prop="projectIds">
                            <el-select multiple filterable v-model="form.projectIds" placeholder="请选择" style="width:100%">
                                <el-option
                                    v-for="item in projectList"
                                    :key="item.id"
                                    :label="item.projectName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            	<!-- <el-row>
                    <el-col :span="6">
                        <el-form-item label="签约项目：" :label-width="formLabelWidth1" prop="projectIds">
                            <el-select multiple filterable v-model="form.projectIds" placeholder="请选择">
                                <el-option
                                    v-for="item in projectList"
                                    :key="item.id"
                                    :label="item.projectName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row> -->
            	<el-row>
                    <el-col :span="8">
                        <el-form-item label="区域（省）：" :label-width="formLabelWidth1" prop="provincesIds">
                            <el-select filterable v-model="form.provincesIds" @change="selectAll" multiple placeholder="请选择" style="width:100%">
                                <el-option
                                    v-for="item in proviceslist"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="4">
                        <el-form-item label="电销组：" :label-width="formLabelWidth1" prop="telemarketingTeamIds">
                            <el-select filterable multiple v-model="form.telemarketingTeamIds" placeholder="请选择" style="width:100%" @change="changeDx">
                                <el-option
                                    v-for="item in dxList"
                                     :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="电销组业务线：" :label-width="formLabelWidth" prop="dxBusinessLine" v-if="0">
                            <el-input v-model="form.dxBusinessLine" placeholder="业务线"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            	<!-- <el-row>
                    <el-col :span="6">
                        <el-form-item label="电销组：" :label-width="formLabelWidth1" prop="telemarketingTeamId">
                            <el-select filterable v-model="form.telemarketingTeamId" placeholder="请选择">
                                <el-option
                                    v-for="item in dxList"
                                     :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row> -->
            
              
                <el-row>
                    <el-form-item class="f-tac">
                        <el-button type="primary" :disabled="btnDisabled" @click="onSubmit('form')" style="margin-right: 10px;">确定</el-button>
                        <a href="/invitearea/inviteAreaList"><el-button >取消</el-button></a>
                    </el-form-item>
                </el-row>
            </el-form>
        </el-row>
    </el-row>
    
</div>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
</body>
<script th:inline="javascript">
	var swList=[[${swList}]];
	var dxList=[[${dxList}]];
	var proviceslist=[[${proviceslist}]];
	var projectList=[[${projectList}]];
    var addUserVm= new Vue({
        el: '#userManage',
        data: function() {
            return {
                btnDisabled: false,   
            	  loading:false,
                tableRadio:'',
                dialogFormChooseRole: false,
                dialogFormChooseOrg: false,
                swList:swList,
                dxList:dxList,
                projectList:projectList,
                proviceslist:proviceslist,
                businessLine:'',
                form: {
                	businessGroupId:'',
                	provincesIds:[],
                	telemarketingTeamIds:[],
                	projectIds:[],
                  businessLine:''
                    
                },
                rules: {
                	businessGroupId: [
                      { required: true, message: '请选择商务小组', trigger: 'change' },
                    ],
                    projectIds: [
                      { required: true, message: '请选择项目', trigger: 'change' },
                    ],
                    provincesIds: [
                      { required: true, message: '请选择省份', trigger: 'change' },
                    ],
                    telemarketingTeamIds: [
                      { required: true, message: '请选择电销组', trigger: 'change' },
                    ]
                  },
                formLabelWidth: '150px',
                formLabelWidth1: '120px',
                methodOptions: [{
                    value: 1,
                    label: 'POST'
                }, {
                    value: 2,
                    label: 'GET'
                }],
                oldOptions:[]
            }        	  
        },
        methods: {
            setProject(value){
                var groupName = "";
                var businessLine ="";
                for(var i = 0 ; i < swList.length ; i++){
                    if(swList[i].id == value){
                        groupName = swList[i].name;
                        addUserVm.form.businessLine = swList[i].businessLine;
                        businessLine = swList[i].businessLine;
                        break;
                    }
                }
                var param = {};
                param.businessGroup = groupName;
                axios.post("/invitearea/InviteProjects", param).then(function (response) {
                    var data = response.data;
                    if(data&&data.length>0){
                        var arr = [];
                        for(var i = 0 ; i < data.length ; i++){
                            arr.push(data[i].id)
                        }
                        addUserVm.form.projectIds = arr;
                    }
                }).catch(function (error) {console.log(error);});
                //根据所选商务小组所属业务线查询电销组
              console.log("businessLine: "+businessLine);
              addUserVm.form.telemarketingTeamIds=[];
                if(businessLine != null){
                  var busParam ={};
                  busParam.businessLine = businessLine;
                  axios.post("/invitearea/getDxOrganizations", busParam).then(function (response) {
                    var data = response.data;
                    addUserVm.dxList = data.data;
                    console.log(data.data);
                  }).catch(function (error) {console.log(error);});
                }
            },
          changeDx(value){
            for(var i = 0 ; i < addUserVm.dxList.length ; i++){
              if(addUserVm.dxList[i].id == value){
                addUserVm.form.dxBusinessLine = addUserVm.dxList[i].businessLine;
                break;
              }
            }
          },
            onSubmit(formName) {
              if(addUserVm.form.telemarketingTeamIds.length == 0){
                this.$message({
                  message: '请选择电销组',
                  type: 'warning'
                });
                return ;
              }
                this.$refs[formName].validate((valid) => {
          	       if (valid) {
       	             var formData = addUserVm.form;
       	             var param={};

       	             param.businessGroupId= formData.businessGroupId;
       	             let obj = {};
       	             obj = this.swList.find((item)=>{
	                      return item.id === param.businessGroupId;
                     });
       	             param.businessGroup  = obj.name;
                     param.businessLine = formData.businessLine;
                     var teamNames ="";
                     var teamIds ="";
                     for ( var i = 0; i <formData.telemarketingTeamIds.length; i++){
                         for(var j = 0 ; j < this.dxList.length ; j++){
                             if(formData.telemarketingTeamIds[i] ==this.dxList[j].id){
                                 if(teamIds !=""){
                                     teamIds = teamIds+","+formData.telemarketingTeamIds[i];
                                 }else{
                                     teamIds = formData.telemarketingTeamIds[i];
                                 }
                                 if(teamNames !=""){
                                     teamNames = teamNames+","+ this.dxList[i].name;
                                 }else{
                                     teamNames = this.dxList[i].name;
                                 }
                             }
                         }
                     }
                     param.telemarketingTeams = teamNames;
                     param.telemarketingTeamIds = teamIds;

                     var projectstrs ="";
       	             for ( var i = 0; i <formData.projectIds.length; i++){
                       if(projectstrs !=""){
                           projectstrs = projectstrs+","+formData.projectIds[i];
                       }else{
                           projectstrs = formData.projectIds[i];
                       }
                     }
	                  var provincestrs ="";
	                  var procinceNames ="";
	                  for ( var i = 0; i <formData.provincesIds.length; i++){
	                	  for(var j =0;j<this.proviceslist.length;j++){
	                		  if(formData.provincesIds[i] ==this.proviceslist[j].id){
	                			  if(procinceNames ==""){
	                				  if(formData.provincesIds[i] !=0){
	                					  procinceNames = this.proviceslist[j].name
	                				  }
	                			  }else{
	                				  if(formData.provincesIds[i] !=0){
	                					  procinceNames =procinceNames+"," +this.proviceslist[j].name
	                				  }
	                			  }
	                		  }
	                	  }
	                	   if(provincestrs !=""){
	                		   if(formData.provincesIds[i] !=0){
	                			   provincestrs = provincestrs+","+formData.provincesIds[i];
	                		   }
	                	   }else{
	                		   if(formData.provincesIds[i] !=0){
	                			   provincestrs = formData.provincesIds[i];
	                		   }
	                	   }
	                	}
	                  param.projectIds= projectstrs;
	       	          param.provincesIds = provincestrs;
	       	          param.provinces = procinceNames;
	       	       	  let provinceobj = {};
	                  provinceobj = this.proviceslist.find((item)=>{
	                     // return (','+provincestrs+',').includes('选项0')item.id === param.telemarketingTeamId;
	                  });
	                  this.loading =true;
                        // console.info(param);
                        this.btnDisabled = true; 
	      	            axios.post("/invitearea/addInviteArea", param)
	      	            .then(function (response) {
	      	            	console.info(response);
	      	            	var data =response.data;
	      	            	if(data.code!="0"){
	      	            		addUserVm.loading = false;
	      	            		addUserVm.$message(data.msg);
                                addUserVm.btnDisabled = false; 
	      	            	}else{
                                addUserVm.btnDisabled = false; 
	      	                	document.location.href='/invitearea/inviteAreaList';
	      	            	}
	      	            })
	      	            .catch(function (error) {
                            console.log(error);
                            addUserVm.loading = false;
                            addUserVm.btnDisabled = false; 
	      	            });
      	             
         	          } else {
         	        	console.log('数据未通过校验！');
         	            return false;
         	          }
         	        });
            },
            selectAll(val) {
            	const allValues = []
            	var isall = 0;
            	var values = val;
            	values = ","+values+",";
            	// 保留所有值
            	for (const item of this.proviceslist) {
            	allValues.push(item.id)
            	}
            	// 用来储存上一次的值，可以进行对比
            	const oldVal = this.oldOptions.length === 1 ? this.oldOptions[0] : []

            	console.log(this.oldOptions.length)
            	console.log(val)
            	console.log(oldVal)
            	var flag = false;
            	var oldflag = false
            	for(var i =0;i<val.length;i++){
            		if(val[i] ==0){
            			flag = true;
            		}
            	}
            	for(var i =0;i<oldVal.length;i++){
            		if(oldVal[i] ==0){
            			oldflag = true;
            		}
            	}
            	// 若是全部选择
            	if (flag) this.form.provincesIds = allValues

            	// 取消全部选中 上次有 当前没有 表示取消全选
            	if (oldflag && !flag) this.form.provincesIds = []

            	// 点击非全部选中 需要排除全部选中 以及 当前点击的选项
            	// 新老数据都有全部选中
            	if (oldflag && flag) {
            	const index = 0;
            	val.splice(index, 1) // 排除全选选项
            	this.form.provincesIds = val
            	}

            	// 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
            	if (!oldflag && !flag) {
            	console.log(11)
            	if (val.length === allValues.length - 1) this.form.provincesIds = val
            	}

            	// 储存当前最后的结果 作为下次的老数据
            	this.oldOptions[0] = this.form.provincesIds
            	}
        },
        created(){
            console.info("create method");
        },
        mounted(){
            document.getElementById('userManage').style.display = 'block';
        }
    })
</script>
</html>